<template>
  <div>
    <div class="option">
      <div class="fast">
        <i class="el-icon-mouse"></i>
        快捷操作
      </div>
      <div class="checkbox">
        <el-checkbox label="今日入库"></el-checkbox>
        <el-checkbox label="当前页面"></el-checkbox>
        <el-checkbox label="筛选结果"></el-checkbox>
        <el-checkbox label="所有订单" ref="check" @change="allChenge"></el-checkbox>
      </div>
      <p>已选中{{num}}件 , 共{{list.length}}条数据</p>
    </div>
  </div>
</template>

<script>
import {mapState , mapMutations} from 'vuex'
export default {
  data() {
    return {
      checked: true,
    };
  },
  computed:{
    ...mapState('indent',['orderList','list','num'])
  },
  methods:{
    ...mapMutations('indent',['AllChange']),
    allChenge(){
      if(this.$refs.check.isChecked){
        this.AllChange()
      }else{
        this.AllChange(1)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.option {
  width: 920px;
  height: 58px;
  border-radius: 5px;
  margin-left: 35px;
  border: 1px solid #fff;
  box-shadow: #999 0px 0px 20px;
  line-height: 58px;
  font-weight: 800;
  font-family: "黑体";
  .fast {
    float: left;
    margin-left: 20px;
    .el-icon-mouse {
      font-weight: 700;
      font-size: 32px;
    }
  }
  .checkbox {
    float: left;
    margin-left: 40px;
    .el-checkbox {
      font-weight: 800;
      font-family: "黑体";
    }
    .el-checkbox__input {
      border: 2px solid #000 !important;
    }
  }
  p{
    line-height: 1;
    font-size: 20px;
  }
}
</style>